<template>
  <div class="item-text">
      <div class="left" v-if="item.title">
          <span>{{item.value}}</span><br/>
          {{item.title}}<br/>
          <div class="plus">今日<span>+{{item.plus}}</span></div>
      </div>
      <div  class="right">
        <div class="item" v-for="it,index in item.data||[]" :key="index">
          {{it.title}}<span>{{it.value}}</span>{{item.unit}}
          <div>今日<span>+{{it.plus||0}}</span></div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  props:{
    item:{
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {

    };
  },
  created() {
  },
  methods: {

  },

};
</script>

<style lang="scss" scoped>
.item-text {
  height: 2.2rem;
  line-height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(19, 25, 47, 1);
  .left{
    font-size: 0.3rem;
    text-align: center;
    margin-right:1rem;
    .plus{
      font-size: 0.2rem;
    }
    span:first-child{
      font-size: 0.4rem;
      color: #15cbb7;
      font-weight: bold;
      margin: 0 10px;
    }
    span:nth-child(2){
      color:#fff;
      font-size: 0.2rem;
      margin-left: 20px;
    }
    span:last-child{
      font-size: 0.25rem;
      color: #15cbb7;
      margin-left: 0.05rem;
    }
  }
  .right{
    width: 3rem;
    font-size: 0.25rem;
    padding: 0.2rem 0;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .item{
      display: flex;
      padding: 0 !important;
      span:first-child{
        color: #15cbb7;
        font-weight: bold;
        margin: 0 10px;
      }
      div{
        font-size: 0.2rem;
        flex-grow: 2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        span{
          font-size: 0.25rem;
        }
      }
    }

  }

}
</style>
